<template>
	<view class="container">
		<com-head textTit="待评价" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="tabList">
			<view class="list"  @click="chiose(index)"
			:class="activeIndex == index ? 'active' : '' "
			v-for="(ele,index) in list" :key="index">{{ele}}</view>
		</view>
		<view class="orderWrap" v-if="reserveList.length">
			<view class="item" v-for="(ele,index) in reserveList" :key="index">
				<!-- 购买项目时 -->
				<view class="projectInfo" v-if="activeIndex == 1">
					<view class="left">
						<image :src="ele.goods_images[0]" mode=""></image>
						<view class="info">
							<view class="itemName">{{ele.goods_name}}</view>
							<view class="bottom">
								<text class="price">¥{{ele.sale_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="projectInfo" v-else>
					<view class="left">
						<image :src="ele.project_images[0]" mode=""></image>
						<view class="info">
							<view class="itemName">{{ele.project_name}}（{{ele.project.duration}}分）</view>
							<view class="bottom">
								<text class="price">¥{{ele.project.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部操作按钮 -->
				<view class="operation">
					<view class="left">
						实付 ：<text>¥{{ele.orders_payable}}</text>
					</view>
					<view class="operationBtn">
						<view class="common" v-if="ele.status !=0" @click="evaluate(ele,index)">去评价</view>
					</view>
				</view>
			</view>
			<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
		</view>
		<!-- 没有数据时 -->
		<view class="empty" style="text-align: center; margin-top: 146rpx;" v-else>
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" style="width: 256rpx;height: 176rpx;"></image>
			<view style="font-size: 24rpx;color: #AFB5BF; padding: 70rpx 0 80rpx 0;">暂无更多待评价信息~</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				status:'loading',
				total:0,
				page:1,
				list:["项目评价","商品评价"],
				activeIndex:0,
				reserveList:[],
				scrollTop: 0
			}
		},
		async onShow() {
			this.page = 1
			this.activeIndex=0
			this.reserveList=[]
			this.getReserveList()
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		// 分页加载
		onReachBottom() {
			if (this.total > this.reserveList.length) {
				this.page++;
				this.getReserveList();
			}
		},
		methods: {
			evaluate(ele){
				if(this.activeIndex == 0){
					this.utlis.goUrl(`/pages/order/projectEvaluate?id=${ele.id}`)
				}else{
					this.utlis.goUrl(`/pages/order/shopEvaluate?id=${ele.id}`)
				}
			},
			async getReserveList(){
				let {data,code} = await this.$u.api.getComment({page:this.page,type:this.activeIndex+1});
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.reserveList = [...this.reserveList, ...data.data];
					this.reserveList.forEach((ele)=>{
						// ele.projects.forEach((list)=>{
							if(this.activeIndex == 0){
								ele.project_images = ele.project_images.split(',')
							}else{
								ele.goods_images = ele.goods_images.split(',')
							}
						// })
					})
					console.log(this.reserveList,"this.reserveList")
					this.total = data.total;
					if (this.total <= this.reserveList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			chiose(index){
				this.page = 1
				this.reserveList =[]
				this.activeIndex = index
				this.getReserveList()
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.noDate{
		width: 360rpx;
		// position: absolute;
		// left: 50%;
		// top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.orderWrap{
		width:calc(750rpx - 64rpx);
		min-height: calc(100vh - 132rpx);
		// position: absolute;
		// top: 132rpx;
		.item{
			padding: 0 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 43rpx;
			.operation{
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					color: #999999;
					font-size: 24rpx;
					text{
						color: #333333;
						font-size: 28rpx;
					}
				}
				.operationBtn{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					>view{
						margin-left: 20rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
					>view:nth-child(1){
						margin-left: 0rpx;
					}
					.goPay{
						width: 236rpx;
						line-height: 70rpx;
						background: #007664;
						border-radius: 6rpx;
					}
					.common{
						width: 128rpx;
						line-height: 70rpx;
						background: linear-gradient(135deg, #50DCC2 0%, #007664);
						border-radius: 67rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
					.border{
						background-color: #FFFFFF;
						color: #007664;
						border: 1rpx solid #007664;
					}
				}
				
			}
			.cacelDetails{
				padding:31rpx 0 32rpx 0;
				.cacelList{
					font-size: 24rpx;
					color: #999999;
					line-height: 26rpx;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					text{
						color: #333333;
						font-size: 24rpx;
						margin-left: 18rpx;
					}
				}
				.cacelList:last-child{
					margin-bottom: 0;
				}
			}
			.projectInfo{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				.left{
					display: flex;
					// align-items: center;
					margin-bottom: 30rpx;
					image{
						flex: none;
						width: 157rpx;
						height: 157rpx;
						border-radius: 6rpx;
						margin-right: 28rpx;
					}
					.info{
						.itemName{
							width: 440rpx;
							font-size: 32rpx;
							color: #000000;
							line-height: 45rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.stores{
							font-size: 24rpx;
							color: #999999;
							line-height: 26rpx;
							margin: 16rpx 0 28rpx 0;
						}
						.bottom{
							width: 441rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 75rpx;
							.num{
								color: #333333;
								font-size: 28rpx;
							}
						}
					}
				}
				.left:last-child{
					margin-bottom: 0;
				}
				.price{
					color: #007664;
					font-size: 30rpx;
				}
			}
			.vipInfo{
				padding: 44rpx 0 47rpx 0;
				.left{
					color: #333333;
					font-size: 24rpx;
					image{
						flex: none;
						width: 114rpx;
						height: 58rpx;
						border-radius: 6rpx;
						margin-right: 23rpx;
					}
				}
			}
			.head{
				display: flex;
				justify-content: space-between;
				height: 106rpx;
				align-items: center;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				.projectName{
					color: #333333;
					font-size: 32rpx;
				}
				.status{
					color: #007664;
					font-size: 24rpx;
				}
				.cecalStatus{
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
	.tabList{
		width:calc(750rpx - 64rpx);
		display: flex;
		justify-content: flex-start;
		// position: fixed;
		// height: 132rpx;
		z-index: 999;
		// background-color: #F6F7FA;
		padding: 20rpx 0;
		box-sizing: border-box;
		.list{
			width: 140rpx;
			height: 52rpx;
			background: rgba(194,194,194,.1);
			border-radius: 68rpx;
			text-align: center;
			line-height: 52rpx;
			color: #666666;
			font-size: 24rpx;
			margin-right: 30rpx;
		}
		.active{
		  background: rgba(136,29,3,.1);
		  color: #007664;
		}
	}

}
</style>
<style >
page{
	/* background-color: #F6F7FA; */
}
</style>
